<template>
    <div>
        <!-- 头部 -->
        <van-nav-bar left-text="返回"  left-arrow :right-text="store.userGouwu?'清空':''" @click-right="store.userGouwu?clickRight():''" @click-left="proxy.$leftClick()">
            <template #title>
                <div>购物车 ({{ store.userGouwu?store.userGouwu.length:0 }})</div>
            </template>
            
        </van-nav-bar>
        <!-- 购物车 -->
        <div>
            <van-card v-for="item in store.userGouwu" :num="item.num" :title="item.proname" :thumb="item.img1" :origin-price="item.originprice">
                <template #price>
                    <span style="color: red;font-size: 18px;">￥{{ (item.originprice*item.discount/10).toFixed(2) }}</span>
                </template>

                <template #tag>
                    <van-checkbox-group v-model="store.checkbox">
                        <van-checkbox :name="item" @click="clicks(item)"></van-checkbox>
                    </van-checkbox-group>
                </template>
                <template #tags>
                    <van-button type="danger" plain size="mini" @click="store.removeData(item)">删除</van-button>
                </template>
                <template #footer>
                    <div class="boxDis">
                        <van-button icon="minus" plain type="primary" :disabled="item.num == 1" size="mini" round
                            @click="subData(item)" />
                        <div>{{ item.num }}</div>
                        <van-button icon="plus" type="primary" size="mini" round @click="addData(item)" />
                    </div>
                </template>
            </van-card>
        </div>
        <!-- 分割线 -->
        <van-divider>猜你想要</van-divider>
        <!-- 数据 -->
        <van-list   class="lists">
                <van-cell v-for="item in (products.productList).slice(0,10)" :key="item.proid">
                    <template #default>
                        <div class="liBox" @click="clickBox(item.proid)">
                            <img :src="item.img1" v-lazy="item.img1">
                            <van-text-ellipsis :content="item.proname" :rows='2' />
                            <div style="color:red">￥{{ item.originprice }}</div>
                        </div>
                    </template>
                </van-cell>
            </van-list>
        <!-- 提交 -->
        <van-submit-bar :price="store.num" button-text="提交订单" :disabled="store.checkbox.length==0" @submit="onSubmit" >
            <van-checkbox v-model="store.alls" @click="Alls" v-show="store.userGouwu?true:false">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script setup lang="ts">
import { onBeforeMount,getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { useGouwu } from '@/store/gouwu';
import { showConfirmDialog } from 'vant'
import { useProductStore } from '../store/product';
import {useDebounceFn} from '@vueuse/core'
import { useDingdan } from '@/store/dingdan';
// 结构全局返回是一个路由的方法位置
const {proxy}:any = getCurrentInstance();
// 获取商品列表的pinia
let products = useProductStore();
let router = useRouter();
let store = useGouwu();
let dingdan = useDingdan();
onBeforeMount(() => {
    // 在购物车加载时，如果没有token直接退出
    localStorage.getItem('token') || (router.push({ name: 'denglu' }));
    // 获取用户购物车信息
    store.fecthGetData();
    // 初始化猜你喜欢的数据
    if(!products.productList.length){
        products.fetchProductList();
    }
    console.log(store.userGouwu);
    
})

// 当点击全部清空
const clickRight = () => {
    showConfirmDialog({
        title: '是否全部清空',
        message:"指定要清空吗",
    })
    .then((res) => {
        store.removeDataALLs();
        console.log(store.userGouwu);
        store.fecthGetData();
    })

}

// 点击猜你喜欢链接
const clickBox = (id: string) => {
    router.push(`/detail/${id}`)
}
// 点击添加
const addData = (item:gouwu)=>{
    store.addData(item);
    add(item)
}
// 点击减少
const subData = (item:gouwu)=>{
    store.sub(item);
    add(item)
}
// 点击全选
const Alls = ()=>{
    store.changeAlls();
    changeAll()
}

// 点击一个按钮
const clicks = (item:gouwu)=>{
    store.changeData();
    chang(item);
}

// 点击提交订单
const onSubmit = async()=>{
    // 将选中数据传输给订单页面
    dingdan.changeData(store.checkbox)
    
    router.push({name:'dingdanConfirm'})
    
}
// 拦截单个按钮请

const chang = useDebounceFn(store.getFlag, 500);
// 拦截添加请求
const add = useDebounceFn(store.updateData, 1500);
// 拦截全选请求
const changeAll = useDebounceFn(store.getAlls, 1500)
</script>


<style scoped>
.boxDis {
    display: flex;
    align-items: center;
    width: auto;
    text-align: center;
    justify-content: end;
    font-size: 16px;
}

.boxDis>div {
    margin: 0 15px;
    text-align: center;
}
.lists {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
}

.lists .van-cell {
    width: 48%;
    height: 300px;
    margin-top: 10px;
    background-color: gainsboro;
}

.liBox {
    padding: 5px;
    box-sizing: border-box;
    text-align: left;
}

.liBox img {
    width: 100%;
    height: 150px;
    margin-bottom: 30px;
}

</style>